<template>
  <!-- 手动订单导入组件 -->
  <div v-loading="loading" element-loading-text="加载中">
    
    <el-form label-width="120px">
      <el-form-item label="导入文件：" prop="importFile">
        <div v-if="importForm.importFileName">{{importForm.importFileName}}</div>
        <el-upload name="files"
          action="/api/common/uploadFiles"
          :multiple="false"
          :show-file-list="false"
          :data="token"
          :before-upload="beforeUploadFile"
          :on-success="handleUploadSuccess">
          <el-button size="small" :loading="fileLoading" type="primary">选取文件</el-button>
        </el-upload>
        <span class="font-blue"><el-button @click="downloadTemplate" type="text">下载导入模板</el-button></span>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer mar-b-10">
      <el-button @click="doClose">取消</el-button>
      <el-button type="primary" @click="doConfirm">确定</el-button>
    </div>

  </div>
</template>

<script>
  import { getToken } from '@/utils/auth'
  import { downloadFile } from '@/api/common/common'

  export default {
    props: {
      showFlag: {
        type: Boolean,
        default() {
          return false
        }
      }
    },
    watch: {
      showFlag(val) {
        if (val) {
          this.init()
        }
      }
    },
    data() {
      return {
        token: '',
        // 导入文件表单
        importForm: {
          importFile: '',
          importFileName: ''
        },
        refreshFlag: false,
        loading: false,
        fileLoading: false
      }
    },
    created() {
      this.token = { accessToken: getToken() }
      this.init()
    },
    methods: {
      // 初始化
      init() {
        const originData = this.$options.data()
        this.importForm = originData.importForm
        this.refreshFlag = originData.refreshFlag
        this.loading = false
      },
      // 下载模板事件
      downloadTemplate() {
        downloadFile('https://enterpriseimg.joinsun.vip/handOrderImportTemplate_v2.xlsx', {}, '导入模板')
      },
      // 文件上传前校验
      beforeUploadFile(file) {
        const ext = file.name.substring(file.name.lastIndexOf('.') + 1)
        if (ext !== 'xlsx') {
          this.$message.error('请上传xlsx格式的Excel')
          return false
        }
        this.fileLoading = true
        return true
      },
      // 文件上传成功后事件
      handleUploadSuccess(res, file) {
        this.fileLoading = false
        if (res.code !== 101) {
          this.$message.error(res.msg)
          return
        }
        this.importForm = {
          importFileName: file.name,
          importFile: res.data[0]
        }
        this.$message({ type: 'success', message: '文件已上传' })
      },
      // 关闭事件
      doClose() {
        this.$emit('callback', this.refreshFlag)
      },
      // 确定事件
      doConfirm() {
        if (!this.importForm.importFile) {
          this.$message.error('请上传导入文件')
          return
        }
        const params = {
          systemRoleType: this.getSystemRoleType(),
          enterpriseId: this.getEnterpriseId(),
          memberId: this.getMemberId(),
          fileUrl: this.importForm.importFile
        }
        this.$bus.$emit('asyncHandle', '200002', params, () => {
          this.refreshFlag = true
        })
      }
    }
  }
</script>

<style lang="less" scoped>

</style>